<template>
  <div class="add-term-dialog">
    <div class="term-dialog-content">
      <div class="title">
        <p class="left">{{ $t("message.environmentSetting.addTerm.title") }}</p>
        <i class="el-icon-close" @click="$emit('CloseTerm')"></i>
      </div>
      <div class="dialog-body">
        <div class="row">
          <p>{{ $t("message.environmentSetting.addTerm.label_1") }}</p>
          <!-- <el-input v-model="codName" size="samll"></el-input> -->
          <el-input v-model="codName" class="table-input" v-if="tblName == 'T_CODE_FLW_CLS'"
            @input="codName = $setMaxLength(codName, 40)">
          </el-input>
          <el-input v-model="codName" class="table-input" v-if="tblName == 'T_CODE_WRK_CLS'"
            @input="codName = $setMaxLength(codName, 100)">
          </el-input>
          <el-input v-model="codName" class="table-input"
            v-if="tblName != 'T_CODE_FLW_CLS' && tblName != 'T_CODE_WRK_CLS'"
            @input="codName = $setMaxLength(codName, 60)">
          </el-input>
        </div>
        <div class="row">
          <p>{{ $t("message.environmentSetting.addTerm.label_2") }}</p>
          <!-- <el-input v-model="codAbrv" size="samll"></el-input> -->
          <el-input v-model="codAbrv" class="table-input" @input="codAbrv = $setMaxLength(codAbrv, 20)">
          </el-input>
        </div>
        <div class="row">
          <p>{{ $t("message.environmentSetting.addTerm.label_3") }}</p>
          <el-input v-model="codSymb" size="samll" @input="codSymb = $setMaxLength(codSymb, 4)"
            :class="codOrdr == 3 ? 'add-bg' : ''" :placeholder="codOrdr == 3 ? '0 / 1' : ''"></el-input>
        </div>
        <div class="footer">
          <button @click="$emit('CloseTerm')">Cancel</button>
          <button @click="addData">OK</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { addDataByTblName } from "@/api/api";
export default {
  props: ["tblName", "prnCode", "grnPrnCode", "codeValue", "codOrdr"],
  name: "AddTerm",
  data() {
    return {
      val: "",
      codName: "",
      codAbrv: "",
      codSymb: "",
    };
  },
  components: {},
  watch: {},
  methods: {
    addData() {
      if (this.codOrdr == 3) {
        if (!this.codSymb) {
          this.$alert(this.$t("message.environmentSetting.tip.message"), '', {
            confirmButtonText: 'OK',
            type: 'warning',
          });
          return;
        } else {

          if (this.codSymb == '0' || this.codSymb == '1') {
            console.log(this.codSymb);
          } else {
            this.$alert(this.$t("message.environmentSetting.tip.message"), '', {
              confirmButtonText: 'OK',
              type: 'warning',
            });
            return;
          }
        }
      }
      let dataJson = {
        tblName: this.tblName,
        code: 0,
        codName: this.codName,
        codAbrv: this.codAbrv,
        codSymb: this.codSymb,
        codOrdr: 0,
        prnCode: parseInt(this.prnCode),
        grnPrnCode: parseInt(this.grnPrnCode),
      };
      addDataByTblName(dataJson)
        .then((res) => {
          console.log(res);
          if (res.data.code == -999) {
            this.$alert(this.$t("message.environmentSetting.tip.addError"), '', {
              confirmButtonText: 'OK',
              type: 'warning',
            });
            return;
          }
          if (res.data.code != 0) {
            this.$alert(res.data.msg, '', {
              confirmButtonText: 'OK',
              type: 'warning',
            });
            return;
          }
          this.$emit("updateTableData");
          this.$emit("CloseTerm");
        })
        .catch(() => {
        });
    },
    blurCheckValue() {
      if (!this.codSymb) return;
      if (this.codSymb.length > 4) {
        this.codSymb = "";

        this.$alert(this.$t("message.environmentSetting.tip.codSymbLength"), '', {
          confirmButtonText: 'OK',
          type: 'warning',
        });
      }
      console.log(this.codSymb);
    },
  },
  created() { },
  mounted() { },
  beforeDestroy() { },
  destroyed() { },
};
</script>
<style lang="scss" scoped>
.add-term-dialog {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 8;
}

.term-dialog-content {
  position: absolute;
  width: 488px;
  height: 283px;
  background: #ffffff;
  box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.05),
    0px 9px 28px 0px rgba(0, 0, 0, 0.08), 0px 6px 16px -8px rgba(0, 0, 0, 0.15);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .title {
    padding: 0 24px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 42px;
    border-bottom: 1px solid #f0f0f0;

    .left {
      font-size: 16px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
    }

    .el-icon-close {
      font-size: 16px;
      cursor: pointer;
    }
  }

  .dialog-body {
    width: 100%;
    height: calc(100% - 42px);
    padding: 24px;

    .row {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 16px;

      p {
        min-width: 92px;
        text-align: center;
      }

      ::v-deep .el-input {
        // width: calc(100% - 92px);
        height: 32px;
      }

      ::v-deep .el-input__inner {
        // width: calc(100% - 92px);
        height: 32px;
      }
    }

    .row:nth-child(1) {
      ::v-deep .el-input {
        background: rgb(255, 255, 225);
      }

      ::v-deep .el-input__inner {
        background: rgb(255, 255, 225);
      }
    }

    .add-bg {
      ::v-deep .el-input {
        background: rgb(255, 255, 225);
      }

      ::v-deep .el-input__inner {
        background: rgb(255, 255, 225);
      }
    }

    // .row:nth-child(3) {
    //   ::v-deep .el-input {
    //     background: rgb(255, 255, 225);
    //   }
    //   ::v-deep .el-input__inner {
    //     background: rgb(255, 255, 225);
    //   }
    // }
    .footer {
      padding-top: 14px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 82px;
        height: 32px;
        margin-left: 16px;
        background: #ffffff;
        border: 1px solid #d9d9d9;
      }

      button:nth-child(2) {
        background: #106ebe;
        color: #fff;
        border: 0 none;
      }
    }
  }
}
</style>
